<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 16</title>
  <script src="js/task16.js"></script>
</head>

<body>
  <fieldset>
    <legend>说明</legend>
    <dl>
      <dt>任务目的</dt>
      <dd>在上一任务基础上继续JavaScript的体验</dd>
      <dd>深入学习JavaScript的事件机制及DOM操作</dd>
      <dd>学习事件代理机制</dd>
      <dd>学习简单的表单验证功能</dd>
      <dd>学习外部加载JavaScript文件</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd>参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示</dd>
      <dd>用户输入的城市名必须为中英文字符，空气质量指数必须为整数</dd>
      <dd>用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）</dd>
      <dd>用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）</dd>
      <dd>用户可以点击表格列中的“删除”按钮，删掉那一行的数据</dd>
    </dl>
  </fieldset>

  <div>
    <label>城市名称：
      <input id="aqi-city-input" type="text">
    </label>
    <br>
    <label>空气质量指数：
      <input id="aqi-value-input" type="text">
    </label>
    <br>
    <button id="add-btn">确认添加</button>
  </div>
  <table id="aqi-table">
    <!--
    <tr>
      <td>城市</td><td>空气质量</td><td>操作</td>
    </tr>
    <tr>
      <td>北京</td><td>90</td><td><button>删除</button></td>
    </tr>
    <tr>
      <td>北京</td><td>90</td><td><button>删除</button></td>
    </tr>
   -->
  </table>
</body>

</html>
